<template>
	<view class="main">
		<view v-show="bindFlag" style="width: 100%;height: 100%;position: absolute;left:0;top: 0;background-color: rgba(0,0,0,0.5);z-index: 30;"></view>
		<view class="motaikuan" v-show="bindFlag">
			<text>手机号码:</text>
			<input v-model="userInfo.phone" type="text" style="border: 1px solid #E0E0E0;"/>
			<text>密码:</text>
			<input v-model="userInfo.key" type="password" style="border: 1px solid #E0E0E0;"/>
			<view style="margin: 10px auto;display: flex;">
				<button size="mini" type="primary" style="width: 40%;"   @click="login">登录</button>
				<button size="mini" type="primary" style="width: 40%;" @click="bindFlag=false">取消</button>
			</view>
			<!-- <text style="display: block;text-align: center;">注册 | 忘记密码</text> -->
			<text style="display: block;text-align: center;color: #ee1e22;font-size: 30rpx;">登录默认同意获取您的信息</text>
			
		</view>
		<view>
			<button type="warn" @getuserinfo="qqlogin" v-if="userInfo.token==null" open-type="getUserInfo"> 登录</button>
			<userCord :userInfo="userInfos" :token="userInfo.token" v-if="userInfo.token!=null"></userCord>
		</view>
		<!-- 功能 -->
		<view class="nodeMeue"  v-if="userInfo.token!=null">
				<!-- 我的作品 -->
				<view class="myNode bock" @click="myCollent">
					<!-- 图标 -->
					<view class="icon iconfont" >
						<image src="../../static/collent.png" style="width:65rpx;height: 60rpx;"></image>
					</view>
					<!-- 文字 -->
					<view >
						收藏
					</view>
				</view>
				<!-- 我的收藏 -->
				<view class="myCollent bock" @click="myNodes">
					
						<!-- 图标 -->
						<view class="icon iconfont" >
							<image src="../../static/nodes.png" style="width:60rpx;height: 60rpx;"></image>
						</view>
						<!-- 文字 -->
						<view >
							头像集
						</view>
					
				</view>	
				<!-- 官方群 -->
				<view class="myCollent bock" open-type="openGroupProfile" style="position: relative;">
						<button open-type="openGroupProfile" style="width: 100%;height: 100%;position: absolute;z-index: 22;opacity: 0;" group-id="116270178">加</button>
						<!-- 图标 -->
						<view class="icon iconfont" >
							<image src="../../static/authen.png" style="width:60rpx;height: 60rpx;"></image>
						</view>
						<!-- 文字 -->
						<view style="font-size: 20rpx;text-align: center;">
							交流群
						</view>
					
				</view>
		</view>
	
		<!-- 列表 -->
		<view class="table">
		
			<view class="li">
				<button>客服</button>
			</view>
			<view class="li">
				<button @click="helpFlag=true">常见问题</button>
				<!-- 模态框 -->
				<Confirm title="常见问题" @close="helpFlag=false" v-show="helpFlag">
					<template slot="content" style="height: 500rpx;">
						<view>
							<text style="font-size: 35rpx;">1、图片加载 --> 等待加载</text>
						</view>
						<view>
							<text style="font-size: 35rpx;">1、登录失败 --> 无法获取权限请手动</text>
						</view>
						<view>背景、描述、头像更换 --> 可前往网页版进行更换，小程序暂未推出</view>
					</template>
				</Confirm>
			</view>
			<view class="li" >
				<button @click="joinMy">加入我们</button>
			</view>
			<view class="li">
				<button  @click="st()">生态圈</button>
			</view>
			<view class="li">
				<button  @click="gy()">关于我们</button>
			</view>
		</view>
		<button v-if="userInfo.token!=null" type="warn" style="background: #d64f4f;color: #FFFFFF;margin-top: 10rpx;" @click="logout()">退出登录</button>
		<view style="font-size: 30rpx;text-align: center;margin-top: 20rpx;">
			<navigator url="../statment/statment">
				《隐私政策》
			</navigator>
		</view>
	</view>
</template>

<script>
	import userCord from "../../compoent/userCord/userCord"
	import Confirm from "../../compoent/modle/confirm.vue"
	import qs from 'qs'
	
	export default {
		components:{userCord,Confirm},
		data() {
			return {
				userInfo:{
					phone:null,
					key:null,
					userName:null,
					userHeader:null,
					code:null,
					token:null,
					codeImg:null
				},				
				userInfos:null,
				nodes:null,
				bindFlag:false,
				openId:null,
				helpFlag:false
				
			}
		},
		onShow() {
			var that = this
			uni.getStorage({
				key:"token",
				success(va){
					that.userInfo.token=va.data
					that.initUserDate()
				}
			})
		},
		onShareAppMessage(res) {
			return {
			   title: this.userInfos.userName+"的个人中心",
			   path: "/pages/friendsCenter/friendsCenter?userId="+this.userInfos.userId
			}
		},
		methods: {			
			addFriends(){
				const button = qq.createAddFriendButton({
				  type: 'text',
				  text: '添加好友',
				  style: {
					left: 10,
					top: 76,
					width: 200,
					height: 40,
					lineHeight: 40,
					backgroundColor: '#ff0000',
					color: '#ffffff',
					textAlign: 'center',
					fontSize: 16,
					borderRadius: 4
				  }
				})

			},
			myCollent(){
				uni.navigateTo({
					url:"../myCollent/myCollent"
					
				})
			},
			myNodes(){
				var nodes = JSON.stringify(this.nodes)
				uni.navigateTo({
					url:"../myNodes/myNodes?nodes="+nodes,
					
				})
			},
			// 请求用户信息
			initUserDate(){
				uni.showLoading({
					title:"更新中",
					mask:true
				})
				var that = this
				uni.request({
					url:"https://app.waghost.com/api/user/myDetils",
					method:"GET",
					header:{
						"Authorization":"TOKEN "+that.userInfo.token
					},
					success(va) {
						if(va.data.code==200){
							that.userInfos=va.data.data.userInfo
							that.nodes = va.data.data.nodes								
						}else{
							that.userInfo.token=null
						}
						uni.hideLoading()
						
					}
				})
				uni.hideLoading()
			},
			qqlogin(login){
			this.userInfo.userHeader=login.detail.userInfo.avatarUrl
			this.userInfo.userName=login.detail.userInfo.nickName
				var _this = this
				uni.login({
					success(res) {
						// 请求 用户 唯一 id
						 if (res.code) {
						      // 发起网络请求
						      qq.request({
						        url: 'https://api.q.qq.com/sns/jscode2session',
						        data: {
									appid:"1112182184",
									secret:"xqRJjU4oyzQe3gb3",
						          js_code: res.code,
								  grant_type:"authorization_code"
						        },
								success(va) {
									_this.openId = va.data.openid
									// 初始化用户信息
									_this.login()
								}
						      })
						    } else {
								uni.showModal({
									content:"登录失败"
								})
						    }
					}
				})
			},
			login(){
				var that = this
				uni.showLoading({
					mask:true,
					title:"登陆中..."
				})
					var va = {
						openId:that.openId,
						userName:that.userInfo.userName,
						userHeader:that.userInfo.userHeader
					}
				uni.request({
					url:"https://app.waghost.com/api/qqlogin",
					method:"POST",
					data:va,
					header:{
						"Content-Type":"application/x-www-form-urlencoded"
					},
					success(va) {
						uni.showModal({
							content:va.data.message
						})
						if(va.data.code==200){
							// 请求用户信息
							that.bindFlag=false
							that.userInfo.token=va.data.data
							uni.removeStorage({
								key:"token"
							})
							uni.setStorage({
								key:"token",
								data:va.data.data
							})
							that.initUserDate()
							uni.hideLoading()
						}else if(va.data.code==2001){
							// 请求验证码
						}
						
					}
				})
			},
			
			logout(){
				var that = this
				uni.showModal({
					title:"退出",
					content:"是否继续退出当前账号",
					success(res) {
						if(res.confirm){
							uni.removeStorage({
								key:"token"
							})
							that.userInfo.token=null
							uni.showToast({
								title:"退出成功"
							})
						}

					}
				})
				
			},
			closeBind(){
			},
			joinMy(){
				uni.showModal({
					title:"加入我们",
					content:"QQ:746381864,wx:B3B3in"
				})
			},
			st(){
				uni.showModal({
					title:"生态圈",
					content:"https://www.wateghost.com 网页版"
				})
			},
			help(){
				
			},
			gy(){
				uni.showModal({
					title:"关于我们",
					content:"个人开发程序自学开发者"
				})
			},
		}
	}
</script>

<style scoped>
	.main{
		box-sizing: border-box;padding: 15rpx;
	}
	.motaikuan{
		width: 80%;
		height: 600rpx;
		background-color: #ffffff;
		box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.5);
		position: fixed;
		z-index: 99;
		left: 50%;
		top: 50%;
		margin-left: -300rpx;
		margin-top: -300rpx;
		border-radius: 15rpx;
		box-sizing: border-box;
		padding: 10px;
		
	}
	.motaikuan text{
		font-size: 30rpx;
		line-height: 70rpx;
	}
	.motaikuan input{
		background-color: #FFFFFF;
		border-radius: 15rpx;
		height: 70rpx;
		padding-left: 10px;
		box-sizing: border-box;
	}
	.nodeMeue{
		width: 100%;
		height: 150rpx;
		background-color: rgb(213, 213, 213,0.5);
		border-radius: 15rpx;
		margin-top: 10px;
		padding: 15rpx;
		box-sizing: border-box;
		display: flex;
		position: relative;
		
	}
	.bock{
		display: inline-block;
		width: 20%;
		height: 100%;
		box-sizing: border-box;
		padding: 15rpx;
	}
	.bock view:nth-child(1){
		font-size: 60rpx;
		color: #d9b018;
		text-align: center;
	}
	
	.bock view:nth-child(2){
		line-height: 40rpx;
		font-size: 20rpx;
		text-align: center;
	}
	.table{
		width: 100%;
		height: auto;
		margin-top: 10px;
		margin-bottom: 20px;
		border-radius: 10px 10px 0px 0px ;
		padding: 0px !important;
		background-color: #FFFFFF;
	}
	.table .li{
		width: 100%;
		height: 80rpx;
		box-sizing: border-box;
		line-height: 80rpx;
		font-size: 30rpx;
		margin-top: 20px;
		padding-left: 10rpx;
	}
	.li button{
		text-align: left;
	}
	.audio{
		width: 100%;
		height: 100px;
		background-color: #21BDFF;
		border-radius: 5px;
		margin-top: 10px;
	}
</style>
